<template>
    <div class="gold-shop-wrap">
        <van-nav-bar title="修改支付密码" left-arrow fixed @click-left="onClickLeft" />
        <div class="pay_text">请为账户{{account.replace(/^(\d{3})\d{4}(\d{4})$/, '$1****$2')}}设置6位数字的支付密码：</div>
        <van-password-input :value="payPassword" :mask="false" :focused="showKeyboard" @focus="showKeyboard = true" />
        <!-- 数字键盘 -->
        <van-number-keyboard v-model="payPassword" :show="showKeyboard" @blur="showKeyboard = false" />
        <div class="pay_text">再次输入支付密码</div>
        <van-password-input :value="newpayPassword" :mask="false" :focused="newshowKeyboard"
            @focus="newshowKeyboard = true" />
        <!-- 数字键盘 -->
        <van-number-keyboard v-model="newpayPassword" :show="newshowKeyboard" @blur="newshowKeyboard = false" />
        <div class="setup_btn">
            <van-button color="linear-gradient(to right, #FF5851, #E9011B)"
                :disabled="payPassword.lenght != 6 && newpayPassword.length != 6" size="large" round
                @click="submit">确定</van-button>
        </div>
    </div>
</template>
<script>
import {PAY_PASSWORD } from '@/api/cms'
export default {
  data() {
    return {
        payPassword: '',
      showKeyboard: false,
      newpayPassword:'',
      newshowKeyboard:false,
      btnShow:true,
      code:"",
      account:""
    };
  },
  mounted() {
    window.scrollTo(0, 0)

    this.code=this.$route.query.sms
    this.account=this.$route.query.account
  },
  methods:{
    onClickLeft() {
            this.$router.back()
        },
    submit(){
        if(this.payPassword!=this.newpayPassword){
            this.$toast('两次输入的密码不一致')
                return
            }
        let params={
            code:this.code,
            password:this.newpayPassword
        }
        this.$http.post(PAY_PASSWORD,params).then(res=>{
            this.$toast.success('支付密码修改成功');
            setTimeout(() => {
                this.$router.push('/home');
            }, 1000)
        })
    }
  }
};
</script>
<style lang="scss" scoped>
.gold-shop-wrap {
    min-height: calc(100vh - 46px);
    padding-top: 46px;
    background: #F2F4F5;

    ::v-deep .van-nav-bar .van-icon {
        color: #333333;
    }

    ::v-deep .van-nav-bar__arrow {
        font-size: 20px;
    }
}

.pay_text {
    width: 98%;
    margin: 0.3rem auto;
    font-size: 0.27rem;
}

[class*=van-hairline]::after {
    border-color: #666;
}

.setup_btn {
    width: 80%;
    margin: 0 auto;
    margin-top: 2rem;
}
</style>
